/**
 * apps 流量超市登录
 */
import { Spin, Button, Result } from 'antd'
import { useAppsLogin } from '@/desktop/logics/login'
import { spin } from '@/desktop/styles'

export default function Login() {
  const { confirming, message, loginUrl, logout } = useAppsLogin()
  return <div css={styles.main}>
    {!confirming ? (
      <iframe src={loginUrl} />
    ) : !message ? (
      <Spin tip="正在加载账号信息..." css={spin(34)}>
        <i />
      </Spin>
    ) : (
      <Result
        status="warning"
        title="登录失败"
        subTitle={message}
        extra={
          <Button type="primary" onClick={logout}>
            退出
          </Button>
        }
      />
    )}
  </div>
}

const styles = {
  main: css`
    height: 566px;
    overflow: hidden;
    iframe {
      border: none;
      display: block;
      height: 100%;
      margin: 0 auto;
      width: 366px;
    }
    & > .ant-spin-nested-loading {
      height: 100%;
      width: 100%;
    }
    .ant-result {
      padding-top: 80px;
    }
  `,
}
